<template>
    <div class="app-container">
      岗位列表
  
      <div class="search-div">
        <el-form label-width="70px" size="small">
          <el-row>
            <el-col :span="8">
              <el-form-item label="岗位名称">
                <el-input
                  style="width: 80%"
                  v-model="searchObj.name"
                  placeholder="岗位名称"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="岗位编码">
                <el-input
                  style="width: 80%"
                  v-model="searchObj.postCode"
                  placeholder="岗位编码"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="状态">

                <el-select v-model="searchObj.status" clearable placeholder="请选择">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
              </el-form-item>
            </el-col>    
          </el-row>

          <el-row style="display: flex">
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="fetchData()">
              搜索</el-button>
  
            <el-button icon="el-icon-refresh" size="mini" @click="resetData">
              重置</el-button>
          </el-row>
        </el-form>
      </div>
  
      <!-- 工具条 -->
      <div class="tools-div">
        <el-button
          type="success"
          :disabled="$hasBP('bnt.sysPost.add') === false"
          icon="el-icon-plus"
          size="mini"
          @click="add"
          >添 加</el-button>
      </div>
  
      <!-- 列表 -->
      <el-table
        v-loading="listLoading"
        :data="list"
        stripe
        border
        style="width: 100%; margin-top: 10px"
      >
        <el-table-column label="序号" width="100" align="center">
          <template slot-scope="scope">
            {{ (page - 1) * limit + scope.$index + 1 }}
          </template>
        </el-table-column>
  
        <el-table-column prop="name" label="岗位名称" width="230" />
        <el-table-column prop="postCode" label="岗位编码" width="230" />
        <el-table-column label="状态" width="160">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status === 1"
              @change="switchStatus(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" />
  
        <el-table-column label="操作" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              :disabled="$hasBP('bnt.sysPost.update') === false"
              @click="edit(scope.row.id)"
              title="修改"/>
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              :disabled="$hasBP('bnt.sysPost.remove') === false"
              @click="removeDataById(scope.row.id)"
              title="删除"/>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 分页组件 -->
      <el-pagination
        :current-page="page"
        :total="total"
        :page-size="limit"
        style="padding: 30px 0; text-align: center"
        layout="total, prev, pager, next, jumper"
        @current-change="fetchData"
      />
  
      
      <el-dialog title="添加/修改" :visible.sync="dialogVisible" width="40%">
        <el-form
          ref="dataForm"
          :model="sysPost"
          label-width="100px"
          size="small"
          style="padding-right: 40px">
          <el-form-item label="岗位名称" prop="name">
            <el-input v-model="sysPost.name" />
          </el-form-item>
          <el-form-item label="岗位编码" prop="postCode">
            <el-input v-model="sysPost.postCode" />
          </el-form-item>
          <el-form-item label="岗位描述" prop="description">
            <el-input v-model="sysPost.description" />
          </el-form-item>

          <el-form-item label="状态" prop="type">
            <el-radio-group v-model="sysPost.status">
                <el-radio :label="1">正常</el-radio>
                <el-radio :label="0">停用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button
            @click="dialogVisible = false"
            size="small"
            icon="el-icon-refresh-right"
            >取 消</el-button>
          <el-button
            type="primary"
            icon="el-icon-check"
            @click="saveOrUpdate()"
            size="small"
            >确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </template> 
  
  
  <script>
  import api from "@/api/post/post.js";
  export default {
    data() {
      return {
        listLoading: false, // 数据是否正在加载
        list: [], // banner列表
        total: 0, // 数据库中的总记录数
        page: 1, // 默认页码
        limit: 5, // 每页记录数
        searchObj: {}, // 查询表单对象
  
        dialogVisible: false, //显示弹窗
        sysPost: {}, //绑定表单数据
        options: [{
          value: '1',
          label: '启用'
        }, {
          value: '0',
          label: '禁用'
        }],
      };
    },
  
    created() {
      this.fetchData();
    },
  
    methods: {
      //列表
      fetchData(pageNum = 1) {
        this.page = pageNum;
  
        api.getPageList(this.page, this.limit, this.searchObj).then((res) => {
          this.list = res.data.records;
          this.total = res.data.total;
        });
      },
  
      //重置方法
      resetData() {
        this.searchObj = {};
        this.createTimes = [];
        this.fetchData();
      },
  
      //添加数据弹窗
      add() {
        this.dialogVisible = true;
        this.sysPost = {};
      },
  
      //判断添加/修改数据方法
      saveOrUpdate() {
        if (!this.sysPost.id) {
          this.save();
        } else {
          this.update();
        }
      },
  
      //添加数据
      save() {
        api.saveUser(this.sysPost).then((res) => {
          //提示信息
          this.$message.success("添加成功");
  
          //关闭弹窗
          this.dialogVisible = false;
  
          //刷新页面
          this.fetchData();
        });
      },
  
      //修改数据
      update() {
        api.updateUserById(this.sysPost).then((res) => {
          //提示信息
          this.$message.success("修改成功");
  
          //关闭弹窗
          this.dialogVisible = false;
  
          //刷新页面
          this.fetchData();
        });
      },
  
      //根据id回显数据
      edit(id) {
        this.dialogVisible = true;
        api.getUserById(id).then((res) => {
          this.sysPost = res.data;
        });
      },
  
      //根据id进行删除
      removeDataById(id) {
        this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          api.removeId(id).then((res) => {
            //提示
            this.$message.success("删除成功");
  
            //刷新数据
            this.fetchData();
          });
        });
      },
  
      //更改用户状态
      switchStatus(row) {
        //获取要修改的状态
        row.status = row.status === 1 ? 0 : 1;
        api.updateStatusById(row.id, row.status).then((res) => {
          this.$message.success("修改成功");
          this.fetchData();
        });
      },
    },
  };
  </script>